// 发送请求，获取页面需要的统计数据
axios.get('/dashboard').then(({data:res}) => {
  console.log(res);
  // 解构数据
  const {groupData,overview,provinceData,salaryData,year} = res.data;
  // 设置最上面的概览区的数据
  for(let key in overview) {
    document.querySelector(`[name=${key}]`).innerHTML = overview[key]
  }
  // 调用创建图表的函数
  lineChart(year);
  classSalaryChart(salaryData);
  groupSalaryChart(groupData);
  sexSalaryChart(salaryData);
  mapChart(provinceData);
})


// -------------------------折线图：全学科薪资走势----------------------------------
function lineChart(data) {
// 1.初始化echarts
let myChart = echarts.init(document.querySelector('#line'));
// 2.创建配置项
let option = {
  title: {
      // 标题配置
      text:'2022全学科薪资走势',
      // 位置配置
      top: 15,
      left: 10,
      // 文字大小
      textStyle: {
          fontSize: 16
      }
  },
  xAxis: {
    type: 'category',
     //占满整个x轴
  //    boundaryGap: false,
    // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    data: data.map(item => item.month),
     //x轴文字颜色
     axisLabel: {
      color : '#999'
     },
     //x轴轴线颜色
     axisLine : {
      lineStyle: {
          color : '#ccc',
          type : 'dashed'
      }
     }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
          type: 'dashed'
      }
    }
  },
    // 鼠标进入提示
    tooltip: {
      trigger: 'axis'
    },
  //网格
  grid:{
      top: '20%'
   },
  //颜色
   color: {
      type: 'linear', //线性渐变
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#499FEE' // 0% 处的颜色
      }, {
          offset: 1, color: '#5D75F0' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
  series: [
    {
      // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
      data: data.map(item => item.salary),
      type: 'line',
      smooth: true,
      lineStyle: {
          width: 6
      },
      symbolSize: 10,
      areaStyle: {
          color: {
              type: 'linear', //线性渐变
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#499FEE' // 0% 处的颜色
              }, {
                  offset: 0.8, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
              },{
                  offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
      }
    }
  ]
};
myChart.setOption(option);
}

//-----------------------饼图：班级平均薪资-------------------------------------------
function classSalaryChart(data) {
  let myChart = echarts.init(document.querySelector('#salary'));
  let option = {
      // 标题
      title: {
          text: '班级薪资分布',
          top: 15,
          left: 10,
          textStyle: {
              fontSize: 16
          }
      },
      // 图例
      legend: {
          left : 'center',
          bottom:'6%',
          itemWidth: 20
      },
      // 鼠标进入样式
      tooltip: {
        trigger: 'item'
      },
      // 颜色
     color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'] , 
      series: [
        {
          name: '班级薪资分布',
          type: 'pie',
          center:['50%','50%'],
          radius: ['50%', '64%'],
          // avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2 //设置图例色块大小
          },
          label: {
            show: false,//每个扇形的描述文字，false不显示
          // position: 'center'//文字显示位置
          },
          labelLine: {
            show: false //标签文字引导线
          },
          data: data.map(item => {
            return {
              value: item.g_count + item.b_count,
              name: item.label
            }
          })
        }
      ]
    };
  myChart.setOption(option);
  };

//------------------------柱状图：每组薪资--------------------------------------------
function groupSalaryChart(data) {
  // console.log(data);
  const myChart = echarts.init(document.querySelector('#lines'))
  const option = {
      // x轴
      xAxis: {
          type: 'category',
          // data: ['张三', '李四', '赵云', '张飞', '马超', '黄忠', '亚索', '盲僧'],
          data: data[1].map(item => {return item.name}),
          // 配置x轴样式
          axisLine: {
              lineStyle: {
                  color:'#ccc', //x轴线的颜色
                  type:'dashed' //
              }
          },
          axisLabel: {
              color : '#999' //文字颜色
          }
        },
      // y轴
        yAxis: {
          type: 'value',
          // Y轴分割线
          splitLine: {
              lineStyle: {
                  type:'dashed' //
              }
          }
        },
       //网格配置
        gird: {
          left: 70,
          top: 30,
          right: 30,
          bottom: 50
        },
       // 鼠标移入配置
       tooltip: {
          trigger: 'item'
       },
        //  颜色
        color: [
          {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#34D39A' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#499FEE' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }],
        series: [
          {
              // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
              data:data[1].map(item => {return item.hope_salary}),
              type: 'bar',
              name: '期望薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
            },
            {
              // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
              data:data[1].map(item => {return item.salary}),
              type: 'bar',
              name: '就业薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
            }
        ]
  }
  myChart.setOption(option)

  // 给小组按钮得父元素注册点击事件
  document.querySelector('#btns').addEventListener('click',async function(e){
    // 判断点击的是不是button按钮
    if (e.target.tagName === 'BUTTON') {
      let i = e.target.innerHTML;
      // 利用排他思想，先移除btn-blue类
      document.querySelector('#btns .btn-blue').classList.remove('btn-blue');
      e.target.classList.add('btn-blue');
      option.xAxis.data = data[i].map(item => {return item.name});
      option.series[0].data = data[i].map(item => {return item.hope_salary});
      option.series[1].data = data[i].map(item => {return item.salary});
      myChart.setOption(option);
    }
  })
}

//------------------------饼图：男女生平均薪资-----------------------------------------
function sexSalaryChart(data) {
  let myChart = echarts.init(document.querySelector('#gender'));
  let option = {
      // 标题配置
      title: [
          {
              text:'男女薪资分布',
              left: 15,
              top: 20,
              textStyle: {
                  fontSize: 16
              }
          },
          {
              text: '男生',
              left: '45%', // 10 表示10px
              top: '45%',
              textStyle: {
                fontSize: 12
              }
            },
            {
              text: '女生',
              left: '45%', // 10 表示10px
              top: '85%',
              textStyle: {
                fontSize: 12
              }
            }
          ],
      // 鼠标移入配置
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '男生薪资分布',
          type: 'pie',
          radius: ['20%', '30%'],
          center: ['50%', '30%'],
          label: {
              show: true,//每个扇形的描述文字，false不显示
            // position: 'center'//文字显示位置
            },
            labelLine: {
              show: true //标签文字引导线
            },
          data: data.map(item => {
            return {
              value: item.b_count,
              name: item.label
            }
          })
        },
        {
          name: '男生薪资分布',
          type: 'pie',
          radius: ['20%', '30%'],
          center: ['50%', '70%'],
          label: {
              show: true,//每个扇形的描述文字，false不显示
            // position: 'center'//文字显示位置
            },
            labelLine: {
              show: true //标签文字引导线
            },
          data: data.map(item => {
            return {
              value: item.g_count,
              name: item.label
            }
          })
        }
      ]
    };
  myChart.setOption(option);
}

//-----------------------地图：籍贯分布------------------------------------------------
function mapChart(data) {
  // 可以提前准备好数据
  const mapData = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 3 },
    { name: '天津', value: 2 },
    { name: '上海', value: 4 },
    { name: '重庆', value: 1 },
    { name: '河北', value: 20 },
    { name: '河南', value: 23 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 15 },
    { name: '黑龙江', value: 12 },
    { name: '湖南', value: 2 },
    { name: '安徽', value: 5 },
    { name: '山东', value: 18 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 5 },
    { name: '浙江', value: 1 },
    { name: '江西', value: 4 },
    { name: '湖北', value: 3 },
    { name: '广西', value: 2 },
    { name: '甘肃', value: 9 },
    { name: '山西', value: 11 },
    { name: '内蒙古', value: 14 },
    { name: '陕西', value: 14 },
    { name: '吉林', value: 10 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 3 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 1 },
    { name: '宁夏', value: 1 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]
  // 遍历mapData
  mapData.forEach(item => {
    let res = data.find(v => {
      return v.name.includes(item.name);
    })
    if(res) {
      item.value = res.value
    }
  })
  
    let myChart = echarts.init(document.querySelector('#map'))
    let option = {
        title: {
            text:'籍贯分布',
            top: 10,
            left: 10,
            fontSize: 16
        },
         //  视觉映射组件
         visualMap: {
          type: 'continuous', // continuous表示连续型； piecewise表示分段式
          min: 0,
          max: 10, // 看每个地区的学员多少，再来决定
          inRange: {
            color: ['#fff', '#0075F0']
          },
          text: [10, 0], // 两端的文字
          left: 40,
          bottom: 20
        },
        tooltip: {
          formatter: '{b}：{c}位学员',
          // 调整样式
          backgroundColor: 'rgba(0,0,0,0.5)',
          borderColor: 'transparent',
          textStyle: {
            color: '#fff'
          }
        },
        series: [{
           name: '籍贯分布',
           type: 'map', //图表的类型是地图
           map: 'china', //表示中国地图
           data: mapData,
           label: {
            show: true, //  文字大小，默认显示文字
            fontSize: 10,
            color: 'rgba(0,0,0,0.7)'
           },
           itemStyle: { // 默认的背景色
            areaColor: '#E0FFFF' ,//每个省的颜色
            borderColor: 'rgba(0, 0, 0, 0.2)'
           },
           emphasis: {  // 鼠标移入高亮状态下的效果（换背景色）
            itemStyle: {
              areaColor: '#34D39A',
              borderWidth: 0,
              shadowBlur:20,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
           },

        }]
    }
    myChart.setOption(option)
}



